<template>
    <z-paging
        ref="paging"
        v-model="dataList"
        @query="query"
        :paging-style="{
            'background-color': '#F7F7F7',
        }"
    >
        <view slot="top">
            <view class="topFixed">
                <view>
                    <u-text text="产品信息" size="28rpx" bold color="#FFF" />
                </view>
                <view class="topFixed_productMessage" @click="goodsDetail">
                    <u-image
                        width="112rpx"
                        height="112rpx"
                        radius="8rpx"
                        :src="productDetail.thumbnail"
                    />
                    <view class="topFixed_productMessage_right">
                        <view
                            style="
                                display: flex;
                                justify-content: space-between;
                            "
                        >
                            <u-text
                                color="#FFF"
                                :iconStyle="{
                                    color: '#FFF',
                                    fontSize: '24rpx',
                                }"
                                :text="
                                    productDetail.productName ||
                                    productDetail.goodsName
                                "
                                lines="1"
                            />
                            <u-icon
                                name="arrow-right"
                                size="24rpx"
                                color="#FFFFFF"
                            />
                        </view>

                        <u-text
                            :text="`已使用:${
                                productDetail.useNumber ||
                                productDetail.usedCount
                            }  待使用:${
                                productDetail.number -
                                    productDetail.useNumber ||
                                productDetail.total - productDetail.usedCount
                            }`"
                            color="#FFF"
                            size="24rpx"
                        />
                    </view>
                </view>
            </view>
            <view style="padding: 32rpx 0 0 32rpx; box-sizing: border-box">
                <u-text text="使用记录" size="32rpx" color="#3d3d3d" />
            </view>
        </view>
        <view class="list">
            <view class="list_item" v-for="item in dataList" :key="item.id">
                <view>
                    <u-text
                        :prefixIcon="
                            item.serviceProcessUrl
                                ? 'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/06/18/1af6c35d55df4a8fb232aeac03cb6eba.png'
                                : 'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/22/20c1d30ce68446aa93cea124eb82b269.png'
                        "
                        size="28rpx"
                        :text="item.usageTime"
                        :iconStyle="{
                            width: '48rpx',
                            height: '48rpx',
                            marginRight: '20rpx',
                        }"
                    />
                </view>
                <view>
                    <u-text
                        :text="
                            item.type == '1'
                                ? '新增：' + item.number + '次'
                                : '已使用：' + item.number + '次'
                        "
                        :color="item.serviceProcessUrl ? '#FFB521' : '#4785FF'"
                        size="24rpx"
                        :suffixIcon="item.type == '1' ? '' : 'arrow-right'"
                        :iconStyle="
                            item.serviceProcessUrl
                                ? 'color:#FFB521'
                                : 'color:#588BF3'
                        "
                        @click="clickHandler(item)"
                    />
                </view>
            </view>
        </view>
        <view class="bottom" slot="bottom">
            <u-button
                v-if="!customerId &&
                   ( productDetail.number - productDetail.useNumber > 0 ||
                    productDetail.total - productDetail.usedCount > 0)
                "
                :text="productDetail.goodsOrServices == 1 ? '使用' : '电话预约'"
                color="#1682FF"
                shape="circle"
                @click="
                    productDetail.goodsOrServices == 1 ? showUse() : showPhone()
                "
            />
            <u-popup :show="show" :round="10" @close="close" @open="open">
                <view class="showBox">
                    <chooseAddress
                        ref="childRef"
                        @changeAddress="changeAddress"
                    ></chooseAddress>
                    <u-gap
                        marginTop="20rpx"
                        marginBottom="24rpx"
                        height="2rpx;"
                        bgColor="#F3F3F3"
                    ></u-gap>
                    <view class="goodsNum">
                        <view class="goodsNum_item">商品数量</view>
                        <view class="num">
                            <u-number-box
                                v-model="productCount"
                                integer
                                :max="
                                    productDetail.number -
                                        productDetail.useNumber ||
                                    productDetail.total -
                                        productDetail.usedCount
                                "
                            ></u-number-box>
                        </view>
                    </view>
                    <u-button
                        text="立即使用"
                        color="#1682FF"
                        shape="circle"
                        @click="sumbit"
                    />
                </view>
            </u-popup>
        </view>
    </z-paging>
</template>

<script>
import { getProductMessage, getProductDetail } from "@/api/health_service.js";
import { orderGoodsUsage, useGoods, infoByUsageId } from "@/api/order.js";
import chooseAddress from "../components/changeAddress";
import { mapGetters } from "vuex";
import caches from "@/config/caches.js";

export default {
    data() {
        return {
            dataList: [],
            id: "",
            productDetail: {},
            productId: "",
            show: false,
            productCount: 1,
            consigneeId: "",
            time: "",
			customerId:''
        };
    },
    onLoad(options) {
		this.customerId = options.customerId || ''
		console.log(this.customerId,'customerId>>')
        this.id = options.id || "";
        if (this.id) {
            getProductDetail(this.id).then((res) => {
                console.log(res);
                this.productDetail = res;
            });
        } else {
            this.productDetail = options?.data && JSON.parse(options?.data);
            this.productId = this.productDetail.goodsId;
        }
        this.$store.dispatch("GET_ADDRESS_LIST");
    },
    components: {
        chooseAddress,
    },
    methods: {
        goodsDetail() {
            uni.navigateTo({
                url: `/pages_shop1/goods/index?id=${this.productId}`,
            });
        },
        async clickHandler(row) {
            if (row.type == "1") return;
            const id = row.id;
            const { data } = await infoByUsageId(id);
            if (!data) return uni.$u.toast("暂无服务记录！");
            console.log();
            uni.$u.route({
                url: "pages_shop1/product_message/h5",
                params: {
                    url: encodeURIComponent(data.flowCommentUrl),
                },
            });
            console.log("open", data);
        },
        open() {
            // console.log('open');
        },
        close() {
            this.show = false;
        },
        changeAddress(id) {
            this.consigneeId = id;
        },
        showUse() {
            this.show = true;
        },
        showPhone() {
            uni.makePhoneCall({
                phoneNumber: "400-8596-598",
                // 成功回调
                success: (res) => {
                    console.log("调用成功!");
                },
                // 失败回调
                fail: (res) => {
                    console.log("调用失败!");
                },
            });
        },
        getTime() {
            var date = new Date(),
                year = date.getFullYear(),
                month = date.getMonth() + 1,
                day = date.getDate(),
                hour =
                    date.getHours() < 10
                        ? "0" + date.getHours()
                        : date.getHours(),
                minute =
                    date.getMinutes() < 10
                        ? "0" + date.getMinutes()
                        : date.getMinutes(),
                second =
                    date.getSeconds() < 10
                        ? "0" + date.getSeconds()
                        : date.getSeconds();
            month >= 1 && month <= 9 ? (month = "0" + month) : "";
            day >= 0 && day <= 9 ? (day = "0" + day) : "";
            var timer =
                year +
                "-" +
                month +
                "-" +
                day +
                " " +
                hour +
                ":" +
                minute +
                ":" +
                second;
            return timer;
        },
        async sumbit() {
            if (!this.consigneeId) {
                uni.$u.toast("收货地址不可为空！");
                return;
            }
            this.time = this.getTime();
            const params = {
                consigneeId: this.consigneeId, //地址id
                goodsId: this.productId, //商品id
                number: this.productCount, //数量
                usageTime: this.time,
                // orderProductId:this.id//订单产品ID
            };
            console.log(params, "result？");
            const result = await useGoods(params);
            if (result.code == 200) {
                uni.$u.toast("提交成功");
                this.close();
                uni.navigateBack({
                    delta: 1,
                });
            }
        },
        async query(pageNum, pageSize) {
            const params = {
                pageNum,
                pageSize,
                orderProductId: this.id,
                productId: this.productId,
            };
            const result = this.id
                ? await getProductMessage(params)
                : await orderGoodsUsage(params);
            this.id
                ? this.$refs.paging.complete(result.rows)
                : this.$refs.paging.complete(result.data.rows); //0：使用 1增加
        },
    },
};
</script>

<style lang="scss" scoped>
.topFixed {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 236rpx;
    background-color: #4785ff;
    padding: 32rpx;
    box-sizing: border-box;
    justify-content: space-between;

    &_productMessage {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        &_right {
            width: 550rpx;
            display: flex;
            flex-direction: column;
            height: 112rpx;
            justify-content: space-between;
        }
    }
}

.list {
    padding: 32rpx;
    box-sizing: border-box;

    &_item {
        width: 100%;
        height: 90rpx;
        border-radius: 12rpx;
        box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.08);
        background: #fff;
        margin-bottom: 24rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 24rpx;
        box-sizing: border-box;
    }
}
.bottom {
    width: 100%;
    padding: 30rpx 40rpx 60rpx 40rpx;
    box-sizing: border-box;
    background-color: #fff;
}
.showBox {
    padding: 30rpx;
}
.goodsNum {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32rpx;
}
.goodsNum_item {
    font-size: 28rpx;
    font-weight: bold;
}
.num {
    font-size: 24rpx;
    color: #999999;
}
</style>
